<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="form.longitude" style="width: 250px" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="纬度" prop="latitude">
            <el-input style="width: 250px" v-model="form.latitude" disabled></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="10">
          <el-form-item label="搜索" prop="keyword">
            <el-input style="width: 250px" v-model="form.keyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="searchKeyword">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="map" style="width: 95vw; height: 90vh;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        longitude: "",
        latitude: "",
        keyword: ''
      },
      map: null,
      searchService: null,
      markers: []
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var myLatlng = new qq.maps.LatLng(37.83148014503287, 112.5714111328125)
      // 创建地图实例
      this.map = new qq.maps.Map(document.getElementById("map"), {
        center: myLatlng, // 设置中心点坐标
        zoom: 13 // 设置地图缩放级别
      });
      
      // 监听地图点击事件获取经纬度
      var that = this;
      qq.maps.event.addListener(this.map, "click", function(event) {
        const lat = event.latLng.getLat();
        const lng = event.latLng.getLng();
        console.log("纬度:", lat, "经度:", lng);
        that.form.longitude = String(lng);
        that.form.latitude = String(lat);
      })
      if(this.map){
        // 初始化搜索服务
        this.searchService = new qq.maps.SearchService({
            map: this.map,
            complete: (results) => {
                if (results) {
                    this.handleSearchResults(results);
                } else {
                    console.log('No search results returned');
                }
            },
            error: function(error){
              console.log(error)
            }
        });
        console.log('地图实例创建成功',this.searchService)
      }else{
        console.log('地图实例未创建')
      }
      
    },
    
    handleSearchResults(results) {
      if (!results || !results.type) {
        console.log('Invalid search results');
        return;
      }
      // 清除之前的搜索结果标记
      if (this.markers && this.markers.length > 0) {
        this.markers.forEach(marker => marker.setMap(null));
      }
      this.markers = [];
      
      // 检查结果类型并处理
      if (results.type === 'POI_LIST' && results.detail && results.detail.pois) {
        // 在地图上标记搜索结果
        results.detail.pois.forEach(poi => {
          var marker = new qq.maps.Marker({
            position: poi.latLng,
            map: this.map
          });
          this.markers.push(marker);
        });
        
        // 调整地图视野以包含所有标记
        if (results.detail.pois.length > 0) {
          var latlngBounds = new qq.maps.LatLngBounds();
          results.detail.pois.forEach(poi => {
            latlngBounds.extend(poi.latLng);
          });
          this.map.fitBounds(latlngBounds);
        }
      } else if (results.type === 'CITY_LIST') {
        // 处理城市列表结果
        console.log('Search returned city list, not POIs');
      } else {
        console.log('No POIs found for the search term');
      }
    },
    
    onSubmit() {},
    
    searchKeyword() {
      if (this.form.keyword) {
        console.log(this.searchService.search,'=======');
        this.searchService.search(this.form.keyword);
      }
    }
  }
};
</script>